女子向けアプリのUI解剖!MERYから見るピンクの話

女子向けアプリのUI解剖!MERYから見るピンクの話

Clock Icon2016.09.28

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは、デザイナーの宮嶋です。
すっかり秋らしい天気になり、いよいよ本格的に秋物の服が欲しくなってまいりました。
メイクやネイルも秋っぽいカラーを取り入れたい!
でもこの秋は何が流行るんだろう?買い物に行く暇があればゲームしてたいし……。

そんな時はアプリで調べて、そのまま通販ですべて購入してしまいましょう!
スマートな引きこもりオタク女子を極めていきたいものですね(年齢的に"女子"はキツいとか言わない)

……というわけで、今回はイマドキ女子御用達アプリのUIデザインを見ていきたいと思います。

※あくまで個人的な解釈のため、実際の制作意図とは異なる場合があります。

「女性向け」のイメージ

ところで、皆様は女性向けと言うとどんなイメージがありますか?

  • ピンク
  • フリル
  • リボン
  • 美容
  • ダイエット
  • 恋愛

……などなど、挙げだしたらキリがないですがだいたいこんなところでしょうか。
デザインの話をしたいので、この中でも装飾的な要素について考えていきたいと思います。

MERYのUIデザイン

今回紹介する女性向けアプリは「MERY」です。
学生から社会人まで、幅広い年齢層から支持を受けている情報まとめサイトのアプリ版になります。

MERYとは?

株式会社ディー・エヌ・エーの子会社、株式会社ペロリが提供している女性向け情報まとめアプリです。
ファッション、ヘアスタイル、メイク・コスメ、恋愛、美容、グルメ、ライフスタイル、ショッピング
など幅広いジャンルの情報が手軽に見ることができます。

iOS版ダウンロードはこちらから
Android版ダウンロードはこちらから

タレントのローラさんが出演するTVCMでご存知の方も多いと思います。
MERY TVCM「カフェ」篇

UIデザインポイント

女子の心をつかむUIデザインポイント - MERY編 -

このスライドによると、

  • 女子に媚びない
  • でも、さりげにかわいく
  • 長い爪を考慮

というポイントを押さえているとのこと。

ピンクのはなし

今回は、「女子に媚びない」「でも、さりげにかわいく」という中から、ピンクの使い方を見ていきます。

 

 

確かにスライドの通り、白が基調のデザインになっているようには見えます。
更に色の使い方やレイアウトをわかりやすくするために、キャプチャ画面をSketchでトレスしていきます。

トレス・検証

 

 

トレスしてみるとピンクが使われている箇所が少ないことがよくわかります。
選択中のカテゴリとタブメニューにしか使われていません。
ここで使われているピンクの色味に注目していきましょう。

と、その前に。みなさんはこんな言葉聞いたことありませんか?

ダサピンク現象

あえて見出しをダサピンク色(個人的な偏見)にしてみました。

ダサピンク現象とは

「女子ってピンクが好きなんでしょ?」
「とりあえずピンクにしとけば女子っぽいよね?」

……などなど、「女子=とりあえずピンク」という安易な考えの元作られた結果、
残念なデザインになってしまう現象のことです。

ここで「ダサピンク」で検索した結果を見てみましょう。

 

 

統計で女性はピンクが好きというデータは確かにあるらしいのですが、全員が同じピンクを好きだとは限りません。
この検索結果に出ているピンクは、特にパステルピンクやショッキングピンクが目につきますね。

例えばショッキングピンクだと「なんかキツい」
パステルピンクだと「可愛すぎて私には似合わない」
など、選ぶ女性が限られてしまいがちです。
となると、単色で使うとターゲットの幅も狭められてしまいますよね。

 

色味による差

同じピンクでも、色味の系統によってかなり印象が変わります。

 

ピンクの種類

 

ダサピンクによく見られた、パステルピンク・ショッキングピンクなどの人工的で甘い色はブルー系のピンクになります。
一見かわいらしい色ですが、セクシー系・小悪魔系など、狙った可愛さを連想させる色です。
また、淡い色になると幼さを感じる雰囲気になります。

一方、イエロー系のピンクはベージュ・オレンジに近い、つまり人の肌に近い血色系ピンクです。
化粧品にもよくあるコーラルピンク・ピーチピンクなどはこちらに分類されます。ナチュラルメイクに欠かせない色です。
こちらのピンクは濃淡をつけてもそこまで雰囲気が変わりにくいように感じます。

 

EB6A7A

 

MERYに使われているピンクは#EB6A7Aです。
先程のピンクの種類を踏まえて見てみると、イエロー系のピンクに近い色だとわかります。
ピンクではありますが、さりげないのに女性らしさを出せる色ですね。

これはあくまで個人的な意見ですが、イエロー系のピンクは一色だけでも「かわいらしさ」「エレガントさ」を表現できる色が多いと感じます。
そのため、似合うテイストを選ばないので女性向けのアプリに使うとかなり優秀だと思います。

まとめ

確かに女性向けアプリはピンクが多いです。
ピンクが基調ではなくとも、アクセントにピンクを使う事が多くなると思います。
しかし、色味選びを間違えなければ「ダサピンク」と呼ばれるようなデザインにはなりません。
私も安易な色を設定しないでコンセプトを考える段階でしっかりと使う色を考えていけるよう頑張ります!

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.